<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" v-model="key">
        <button @click="goAdd()">新增</button>
        <table border="1">
            <thead>
                <tr>
                    <td>account</td>
                    <td>密码</td>
                    <td>性别</td>
                    <td>爱好</td>
                    <td>校区</td>
                    <td>其他信息</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in stu" :key="item.id">
                    <td>{{item.account}}</td>
                    <td>{{item.password}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.hobby}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.info}}</td>
                    <td>
                        <a @click="goUpdate(item.id)">修改</a>||
                        <a @click="delStudent(item.id)">删除</a>
                    </td>
                </tr>


            </tbody>
        </table>
    </div>
    <script>
        const app = Vue.createApp({
            setup() {
                let student = Vue.reactive([]
                );
                function get() {
                    $.ajax({
                        url: "http://127.0.0.1:8080/get",
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success(result) {
                            console.log(result);
                            student.push(...result.data)
                        },
                        error(res) {
                            console.log(res);
                        }
                    });
                }
                function delStudent(id) {
                    $.ajax({
                        url: "http://127.0.0.1:8080/delete",
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: { "id": id },
                        success(res) {
                            console.log(res);
                            //
                            student.splice(0);
                            student.push(...get().result.data);
                        }
                    })

                };
                function goUpdate(id) {
                    window.localStorage.setItem("id", id);
                    window.open("http://127.0.0.1:5500/1.html")

                }
                function goAdd() {
                    window.open("http://127.0.0.1:5500/1.html")
                }
                get();
                let stu = Vue.ref([])
                let key = Vue.ref("")

                Vue.watch([student, key], () => {
                    console.log(key);
                    stu.value = student.filter(p => {
                        return p.account.indexOf(key.value) != -1;
                    })

                })
                return { stu, key, delStudent, goUpdate, goAdd }
            },

        }).mount("#root")

    </script>
</body>

</html>